import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd'
import {
  NButton,
  NDataTable,
  NIcon,
  NInput,
  NSelect,
  NSpace,
  SelectOption
} from 'naive-ui'
import { defineComponent, ref } from 'vue'
import ModUDFModal from './dialog/mod-udf-modal'
import CreateUDFModal from './dialog/create-udf-modal'
import UDFDetailModal from './dialog/udf-detail-modal'
import { useColumns } from './use-columns'
import { useTable } from './use-table'

const UDFManage = defineComponent({
  name: 'UDFManage',
  setup() {
    const showCreateUDFModalRef = ref(false)
    const { state, getList, onOperationClick } = useTable()
    const { columnsRef } = useColumns(onOperationClick)
    //数据源类型下拉选项
    const dsTypeOptions: SelectOption[] = [
      {
        value: 'HIVE',
        label: 'HIVE'
      },
      {
        value: 'FLINKSQL',
        label: 'FLINKSQL'
      }
    ]
    return {
      state,
      getList,
      columnsRef,
      dsTypeOptions,
      showCreateUDFModalRef
    }
  },
  methods: {
    onCreateUDF() {
      this.showCreateUDFModalRef = true
    }
  },
  render() {
    return (
      <NSpace vertical>
        <Card>
          <NSpace justify='space-between'>
            <NButton onClick={this.onCreateUDF} type='info' size='tiny'>
              {window.$t('taskManage.createUDF')}
            </NButton>
            <NSpace>
              <NInput
                v-model:value={this.state.name}
                clearable
                size='tiny'
                placeholder={window.$t('taskManage.udfName')}
                style='width: 100px'
              />
              <NSelect
                v-model:value={this.state.dbType}
                clearable
                options={this.dsTypeOptions}
                size='tiny'
                placeholder={window.$t('dataManage.datasourceType')}
                style='width: 100px'
              />
              <NButton type='info' size='tiny' onClick={this.getList}>
                <NIcon>
                  <SearchOutlined />
                </NIcon>
              </NButton>
            </NSpace>
          </NSpace>
        </Card>
        <Card>
          <NSpace vertical>
            <NDataTable
              row-class-name='items'
              columns={this.columnsRef.columns}
              size='small'
              data={this.state.list}
              loading={this.state.loading}
              scrollX={this.columnsRef.tableWidth}
            />
          </NSpace>
          <CreateUDFModal
            showModal={this.showCreateUDFModalRef}
            onModalShowChange={() => {
              this.showCreateUDFModalRef = false
            }}
            onRefreshList={this.getList}
            dsTypeOptions={this.dsTypeOptions}
          ></CreateUDFModal>
          <ModUDFModal
            showModal={this.state.showModUDFModalRef}
            onModalShowChange={() => {
              this.state.showModUDFModalRef = false
            }}
            onRefreshList={this.getList}
            dsTypeOptions={this.dsTypeOptions}
            udfDefined={this.state.currentRecord}
          ></ModUDFModal>
          <UDFDetailModal
            showModal={this.state.showUDFDetailModalRef}
            onModalShowChange={() => {
              this.state.showUDFDetailModalRef = false
            }}
            udfDefined={this.state.currentRecord}
          ></UDFDetailModal>
        </Card>
      </NSpace>
    )
  }
})

export default UDFManage
